<template>
    <Modal v-model="show" width="90" title="选择用户" @on-ok="handlerOk" :styles="{top:'5px'}">
        <i-form inline :label-width="60" class="search-column">
            <form-item label="用户名">
                <i-input v-model="search.username" clearable placeholder="请输入"/>
            </form-item>
            <form-item label="名称">
                <i-input v-model="search.name" clearable placeholder="请输入"/>
            </form-item>
            <form-item label="角色">
                <i-select v-model="roles.value" multiple>
                    <i-option v-for="item in roles.list" :value="item._id" :key="item._id">{{ item.name }}</i-option>
                </i-select>
            </form-item>
            <form-item :label-width="0">
                <i-button :loading="loading" type="primary" icon="ios-search" @click="handlerSearch">搜索</i-button>
            </form-item>
        </i-form>
        <div class="select-user-wrap">
            <Divider>用户列表</Divider>
            <div class="user-list">
                <div class="user-item" :class="{active: checkedIds.includes(v._id)}" v-for="v in list" :key="v._id"
                     @click="handlerSelect(v)">
                    <img :src="$root.FILE_PATH + v.headImg  " class="avatar" alt="">
                    <div class="info">
                        <span class="name">{{v.name}}</span>
                        <div>
                            <span class="sex">{{v.sex}}</span>
                            <span class="state">{{v.state === '1' ? '' : '封禁'}}</span>
                        </div>
                        <Icon class="checked" type="md-checkmark-circle-outline"/>
                    </div>
                </div>
                <div class="user-item more" @click="pageFn">
                    加载更多
                    <Spin fix v-show="loading"></Spin>
                </div>
            </div>
            <Divider>已选择</Divider>
            <div class="user-list">
                <div class="user-item" v-for="v in checkedList" @click="handlerSelect(v)">
                    <img :src="$root.FILE_PATH + v.headImg  " class="avatar" alt="">
                    <div class="info">
                        <span class="name">{{v.name}}</span>
                        <div>
                            <span class="sex">{{v.sex}}</span>
                            <span class="state">{{v.state === '1' ? '' : '封禁'}}</span>
                        </div>
                        <icon class="checked" type="md-checkmark-circle-outline"></icon>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
</template>

<script>
    import API from '../lib/API_PATH'

    export default {
        name: "select-user",
        props: {},
        watch: {},
        data() {
            return {
                search: {
                    username: '',
                    name: '',
                    role: []
                },
                roles: {
                    list: [],
                    activeList: [], // 待添加为管理员
                    value: [],
                    show: false,
                    id: '',
                    admin: '',
                    loading: false,
                    timer: null
                },
                show: false,
                page: {
                    page: 1,
                    limit: 10
                },
                loading: false,
                list: [],
                checkedList: [],
                checkedIds: [],
                cb: null
            }
        },
        created() {
            this.$http.get(API.ROLE, {limit: 10000}).then(res => {
                let list = res.data.list
                this.roles.admin = res.data.admin
                for (let i of list) {
                    i.key = i._id
                    i.label = i.name
                    i.disabled = res.data.admin === i._id
                }
                this.roles.list = list
            })
            this.getUserFn()
        },
        methods: {
            open(cb) {
                this.show = true
                if (typeof cb === 'function') {
                    this.cb = cb
                }
            },
            async getUserFn() {
                this.loading = true
                let params = {
                    name: this.search.name,
                    username: this.search.username,
                    page: this.page.page,
                    limit: this.page.limit,
                    role: this.roles.value.join()
                }
                try {
                    const {data} = await this.$http.get(API.USER, {params})
                    this.list.push(...data.list)
                    this.page.page = parseInt(data.page)
                } catch (e) {

                }
                this.loading = false
            },
            handlerSearch() {
                this.page.page = 1
                this.list = []
                this.getUserFn()
            },
            pageFn() {
                this.page.page += 1
                this.getUserFn()
            },
            handlerSelect(item) {
                let idx = this.checkedIds.indexOf(item._id)
                if (idx === -1) {
                    this.checkedIds.push(item._id)
                    this.checkedList.push(item)
                } else {
                    this.checkedIds.splice(idx, 1)
                    this.checkedList = this.checkedList.filter(v => {
                        return v._id !== item._id
                    })
                }
            },
            handlerOk() {
                if (this.cb) {
                    this.cb(JSON.parse(JSON.stringify(this.checkedList)))
                }
                this.show = false
            }
        }
    }
</script>

<style lang="scss">
    .select-user-wrap {
        .user-list {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 10px;
            overflow-y: auto;
            max-height: 300px;
            align-items: flex-start;
        }

        .user-item {
            position: relative;
            border: 1px solid #ccc;
            padding: 10px;
            display: flex;
            align-items: center;

            cursor: pointer;
            margin: 0 10px 10px 10px;

            .info {
                flex: 1;
            }

            img {
                width: 50px;
                height: 50px;
                flex: 0 0 50px;
                margin-right: 10px;
                display: block;
                background-color: #eee;
                border-radius: 3px;
            }

            .name {
                font-size: 14px;
                margin-bottom: 5px;
                font-weight: 700;
            }

            .sex {
                margin-right: 5px;
            }

            .checked {
                position: absolute;
                bottom: -5px;
                right: -5px;
                font-size: 20px;
                background-color: #fff;
                color: #ccc;
                opacity: 0;
                transition: all .3s;
            }

            &.active {
                border-color: #19be6b;

                .checked {
                    color: #19be6b;
                    opacity: 1;
                }
            }

            &.more {
                position: relative;
                border-color: #2D8cF0;
                color: #2D8cF0;
                height: 72px;
                padding: 0 40px;
                font-size: 16px;
                transition: all .2s;

                &:hover {
                    background-color: #2D8cF0;
                    color: #fff;
                }
            }
        }
    }
</style>
